<script lang="ts" setup>

import { computed, inject, onMounted, reactive } from 'vue';

import { TinyColor } from '@ctrl/tinycolor';
import { ElTooltip } from 'element-plus';
import { NodeData, NodeLFData, NodeX6Data } from '../type';

const getNode = inject<any>('getNode');

const data = reactive({
    darkenColor: '#fff',
    lightenColor: '#fff',
    status: 'default',
    label: '普通组件',
    desc: '',
    name: '',
    visibility: false,
    x6Info: {} as NodeX6Data,
    liteInfo: {} as NodeLFData,
});

const toolTipDisabled = computed(() => {
    return data.name && data.name !== '' && data.name.length >= 10;
});

const content = computed(() => {
    return data.name && data.name !== '' ? data.name : data.label;
});

const tagData = computed(() => {
    let res = '暂无数据'
    if (data.liteInfo.cmpData && !!data.liteInfo.cmpData.tag) {
        return data.liteInfo.cmpData.tag
    }
    return res
})

onMounted(() => {
    if (getNode) {
        const node = getNode();
        const nodeStore = node.store.data;
        changeData(nodeStore.data);
        node.on('change:data', (e: any) => {
            console.log('change:data', e);
            changeData(e.current);
        });
    }
});

const changeData = (nodeData: NodeData) => {
    // 节点名称
    if (nodeData.liteInfo) {
        data.label = nodeData.liteInfo.label;
        if (nodeData.liteInfo.description) {
            data.desc = nodeData.liteInfo.description;
        }
        data.liteInfo = nodeData.liteInfo;
    }
    if (nodeData.x6Info) {
        data.x6Info = nodeData.x6Info;
        data.darkenColor = new TinyColor(nodeData.x6Info.color)
            .darken(10)
            .toHexString();
        data.lightenColor = new TinyColor(nodeData.x6Info.color)
            .lighten(10)
            .toHexString();
    }
};
</script>

<template>
    <div :style="{
        '--stencil-color': data.x6Info.color,
        '--header-bg-color': data.lightenColor,
        '--sign-color': data.darkenColor,
    }">
        <!-- 默认未激活时 -->
        <div v-if="!data.x6Info.activated" class="nodeContainer node-stencil">
            <ElTooltip placement="left-start" :disabled="!toolTipDisabled" :content="content">
                <div class="node">
                    <div class="flex">
                        <div class="line-height-loose label ml-2">
                            {{ content }}
                        </div>
                    </div>
                </div>
            </ElTooltip>
        </div>

        <!-- 激活后 -->
        <div v-else :class="{ 'node-select': data.x6Info.selected }" class="nodeContainer node-active" :style="{
            '--active-width': data.x6Info.width,
            '--active-height': data.x6Info.height,
        }">
            <ElTooltip placement="left-start" :disabled="!toolTipDisabled" :content="content">
                <div class="node">
                    <div class="header h-30% flex items-center">
                        <div class="index"></div>
                        {{ data.label }}
                    </div>
                    <div class="tag desc">
                        {{ tagData }}
                    </div>
                </div>
            </ElTooltip>
        </div>
    </div>
</template>

<style lang="scss" scoped>
:root {
    --stencil-color: #6eeeee;
    --header-bg-color: #d4f1f1;
    --sign-color: #6eeeee;
    --active-width: 300;
    --active-height: 100;
}

.node-select {
    border: 1px solid #4d88ff !important;
}

.nodeContainer.node-active {
    width: calc(var(--active-width) * 1px);
    height: calc(var(--active-height) * 1px);
    border-radius: 8px !important;
}

.node-stencil {
    border-left: 4px solid var(--stencil-color) !important;
}

.node-wrapper {
    width: 100%;
    height: 100%;
}

.nodeContainer {
    width: 160px;
    height: 30px;
    overflow: hidden;
    font-size: 14px;
    line-height: 30px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px 1px rgb(0 0 0 / 6%);
}

.header {
    box-sizing: border-box;
    padding: 0 5px;
    color: black;
    background: linear-gradient(var(--header-bg-color) 0%, #fff 100%);

    .index {
        width: 10px;
        height: 10px;
        margin: 5px;
        background-color: var(--sign-color);
        border: 1px solid #ccc;
        border-radius: 50%;
    }
}

.desc {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 60%;
    padding: 0 8px;
    font-size: 12px;
    color: #535151;
}

.flex {
    display: flex;
}

.node {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;

    .label {
        /* 保持文本在一行显示 */
        overflow: hidden;

        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        white-space: nowrap;

        /* 当文本超出时显示省略号 */
    }
}
</style>
